<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <router-link :to="path">
        <span class="back-link"><svg-icon icon-class="ds-left-double-arrow" /> 返回</span>
      </router-link>
    </div>
    <el-form ref="form" label-position="left" :model="form" label-width="80px">
      <el-row>
        <el-col :span="12" offset="1" style="min-width:550px" v-if="type === 'create'">
          <p class="form-header"><svg-icon icon-class="ds-person" />新增组员</p>
          <template>
            <el-transfer
              filterable
              :titles="['未选择用户', '已选择用户']"
              :filter-method="filterMethod"
              filter-placeholder="请输入用户名"
              v-model="form.uservalues"
              :data="users">
            </el-transfer>
          </template>
        </el-col>
        <el-col :span="12" offset="1" v-else>
          <p class="form-header"><svg-icon icon-class="ds-person" />个人信息</p>
          <el-form-item label="姓名">
            {{truename}}
          </el-form-item>
          <el-form-item label="账号">
            {{username}}
          </el-form-item>
          <el-form-item label="类型">
            {{level_text}}
          </el-form-item>
          <el-form-item label="手机号">
            {{mobile}}
          </el-form-item>
          <el-form-item label="状态">
            {{status_text}}
          </el-form-item>
        </el-col>
        <el-col :span="10" offset="1">
          <p class="form-header"><svg-icon icon-class="ds-lock" />分组权限</p>
          <el-form-item label="订单模块" v-if="auths[0]">
            <el-checkbox-group v-model="form.auth" size="small">
              <el-checkbox-button v-for="(city,index) in auths[0]" v-if="groupAuthlist.indexOf(index) >= 0" :label="index" :key="index">{{city}}</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="报销模块" v-if="auths[1]">
            <el-checkbox-group v-model="form.auth" size="small">
              <el-checkbox-button v-for="(city,index) in auths[1]" v-if="groupAuthlist.indexOf(index) >= 0" :label="index" :key="index">{{city}}</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="理赔模块" v-if="auths[2]">
            <el-checkbox-group v-model="form.auth" size="small">
              <el-checkbox-button v-for="(city,index) in auths[2]" v-if="groupAuthlist.indexOf(index) >= 0" :label="index" :key="index">{{city}}</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="PCP模块" v-if="auths[3]">
            <el-checkbox-group v-model="form.auth" size="small">
              <el-checkbox-button v-for="(city,index) in auths[3]" v-if="groupAuthlist.indexOf(index) >= 0" :label="index" :key="index">{{city}}</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="通用功能" v-if="auths[4]">
            <el-checkbox-group v-model="form.auth" size="small">
              <el-checkbox-button v-for="(city,index) in auths[4]" v-if="groupAuthlist.indexOf(index) >= 0" :label="index" :key="index">{{city}}</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="企业数据" v-if="auths[5]">
            <el-checkbox-group v-model="form.auth" size="small">
              <el-checkbox-button v-for="(city,index) in auths[5]" v-if="groupAuthlist.indexOf(index) >= 0" :label="index" :key="index">{{city}}</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        
      </el-row>
      <el-form-item style="margin-top:40px">
        <router-link :to="path">
        <el-button>取消</el-button>
        </router-link>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style>
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .pdl10 {
    padding-left: 10px;
  }
  .form-header {
    /* padding-left: 10px; */
    color: #606266;
    font-weight: 700;
  }
  .form-header svg {
    color: #3fb2fe;
    font-size: 20px;
    margin-right: 10px;
  }
  .el-form-item__label {
    font-weight: normal;
  }
  .clearfix:after {
    clear: both
  }
  .el-col:nth-child(3n){
    clear: right;
  }
  .el-transfer-panel__body {
    height: 203px;
  }
  .el-transfer-panel__list.is-filterable {
    height: 149px;
  }
  .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
    font-size: 14px;
  }
  .el-col {
    margin-bottom: 0px!important;
  }
  .el-checkbox-button__inner {
    border-left: 1px solid #dcdfe6;
    border-radius: 0!important;
    margin-right: 10px;
  }
</style>
<script>
import { getGroupInfo } from '@/api/user'
import { noList, addRow, updateRow, userDetail } from '@/api/group'
import { subComma, authList } from '@/utils'
export default {
  data() {
    const generateData2 = _ => {
      this.gid = this.$route.params.gid
      if (this.gid !== undefined && this.gid !== '') {
        this.getUserList()
      }
    }
    return {
      path: '/manager/grouplist',
      tableKey: 0,
      type: 'create',
      form: {
        id: '',
        g_name: '',
        g_desc: '',
        uservalues: [],
        auth: [],
        g_admin_ids: '',
        auth_ids: ''
      },
      username: '',
      truename: '',
      status_text: '',
      level_text: '',
      mobile: '',
      auths: authList(),
      groupAuthlist: [],
      users: generateData2(),
      value2: [],
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1
      }
    }
  },
  created() {
    if (this.gid !== undefined && this.gid !== '') {
      this.initData()
    } else {
      this.$message({
        message: '参数错误',
        type: 'error',
        duration: 2000,
        onClose: () => {
          this.$router.push({ path: '/manager/grouplist' })
        }
      })
    }
  },
  methods: {
    getUserList() {
      noList({ gid: this.gid }).then(response => {
        const list = response.data
        const data = []
        list.forEach((item, index) => {
          data.push({
            label: item.truename,
            key: item.id,
            pinyin: item.truename
          })
        })
        this.users = data
      })
    },
    onSubmit() {
      var admin_str = ''
      var auth_str = ''
      for (const v of this.form.uservalues) {
        admin_str += v + ','
      }
      for (const v of this.form.auth) {
        auth_str += v + ','
      }
      this.form.auth_ids = subComma(auth_str) // 权限组合
      this.form.gid = this.gid // 当前分组id
      // 添加用户信息
      if (this.type === 'create') {
        // 判断是否选择用户，如果没有则报错
        if (admin_str === '') {
          this.$message({
            message: '请选择用户',
            type: 'error',
            duration: 2000
          })
          return false
        }
        this.form.uids = subComma(admin_str)
        addRow(this.form).then(response => {
          this.$message({
            message: '添加成功',
            type: 'success',
            duration: 2000,
            onClose: () => {
              this.$router.push({ path: this.path })
            }
          })
        })
      } else {
        updateRow(this.form).then(response => {
          this.$message({
            message: '修改成功',
            type: 'success',
            duration: 2000,
            onClose: () => {
              this.$router.push({ path: this.path })
            }
          })
        })
      }
    },
    // 初始化数据
    initData() {
      // 检索当前是否是修改
      this.form.uid = this.$route.params.uid
      if (this.form.uid !== undefined) {
        this.type = 'update'
        // 如果是修改则获取当前用户的基本信息
        var obj = {}
        obj.gid = this.gid
        obj.uid = this.form.uid
        userDetail(obj).then(response => {
          const data = response.data
          this.username = data.userinfo.username
          this.truename = data.userinfo.truename
          this.level_text = data.userinfo.level_text
          this.status_text = data.userinfo.status_text
          this.mobile = data.userinfo.mobile
          this.form.auth = data.userinfo.haveauth.split(',')
        })
      }
      getGroupInfo({ id: this.gid }).then(response => {
        const data = response.data
        this.groupAuthlist = data.auth_ids.split(',') // 获取分组中的所有权限
        for (const k in this.auths) {
          if (this.hasArray(this.auths[k]) === 0) {
            delete (this.auths[k])
          }
        }
      })
    },
    // 判断是否在数组中
    hasArray(a) {
      var sign = 0
      for (const k in a) {
        if (this.groupAuthlist.indexOf(k) >= 0) {
          sign = 1
        }
      }
      return sign
    }
  }
}
</script>
